<template>
  <heads title="仪器预约"/>
  <view class="pink full">
    <view class="photo-box">
      <image src="@/static/images/打印机.jpg" class="photo-left"/>
      <view class="photo-right">
        <notice
            :title="data.title"
            :time="data.photo"
            :people="data.people"
            :content="data.content"
        />
      </view>
    </view>

    <view class="top25 border">
      <view class="text-title text-center width-half leftmost top">点击可预约</view>
      <view class="width-half rightmost">
        <button type="primary" @click="reserve" class="width-half">预约</button>
        <uni-popup ref="popup" :mask-click="false" class="distance-top100 left text-center">
          <view>
            <uni-card title="预约信息" :is-full="true">
              <view>
                <uni-forms :modelValue="form">
                  <uni-forms-item label="仪器编码">
                    <uni-easy-input type="text" v-model="form.machineId" :disabled="true"/>
                  </uni-forms-item>

                  <uni-forms-item label="仪器名称">
                    <uni-easy-input type="text" v-model="form.machine" :disabled="true"/>
                  </uni-forms-item>

                  <uni-forms-item label="姓名">
                    <uni-easy-input type="text" v-model="form.people" placeholder="请输入姓名"/>
                  </uni-forms-item>

                  <uni-forms-item label="手机号码">
                    <uni-easy-input type="text" v-model="form.phone" placeholder="请输入手机号码"/>
                  </uni-forms-item>

                  <uni-forms-item label="身份证号码">
                    <uni-easy-input type="text" v-model="form.cardId" placeholder="请输入身份证号码"/>
                  </uni-forms-item>

                  <uni-forms-item label="预约时间">
                    <uni-datetime-picker
                        v-model="form.dateTimeRange"
                        :value="form.dateTimeRange"
                        type="date-time-range"
                        start="2022-3-16 12:00:00"
                        rangeSeparator="至"
                    />
                  </uni-forms-item>

                </uni-forms>
                <button @click="success">提交</button>
              </view>

            </uni-card>
          </view>
        </uni-popup>
      </view>
    </view>
    <block-chain ref="block" describe="预约仪器" :data="tip"/>

    <view v-for="t of times" :key="t" v-if="display">
      <view class="subscribe-time">
        <button @click="subscribeTime(t)" :disabled="t.disabled">{{ t.value }}</button>
      </view>
    </view>

    <uni-popup ref="approval" class="distance-top100 text-center  width-half left70" type="message">
      <uni-popup-message type="warn" message="等待领导审批中.....\n正在跳转管理界面" :duration="4000"/>
    </uni-popup>

  </view>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import Notice from "@/components/card/notice.vue";
import Heads from "@/components/head/heads.vue";
import UniCard from '@dcloudio/uni-ui/lib/uni-card/uni-card.vue';
import UniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue';
import UniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue';
import UniEasyInput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue';
import UniDatetimePicker from '@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue';
import BlockChain from "@/components/card/block-chain.vue";
import UniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue";
import UniPopupMessage from "@dcloudio/uni-ui/lib/uni-popup-message/uni-popup-message.vue";

const data = {
  title: "全数字化联想打印机",
  content: "位置：中国农业科学院 ",
  people: "管理员： 谢能付",
  photo: "联系电话：13314415516",
  path: "https://api.onedrive.com/v1.0/shares/s!AuySiAQIgLTChY4MjbDL8VwmxpymVg/root/content"
}

let popup = ref()
let block = ref()
let approval = ref()
const display = ref(true)

let times = reactive([])

onMounted(() => {
  axios.get("http://localhost:24154/api/data/time").then((resp) => {
    if (resp.status == 200) {
      for (const data of resp.data) {
        times.push(data)
      }
    }
  })
})

function reserve() {
  display.value = false
  popup.value.open("top")
}


const form = reactive({
  machineId: "JK1211gh",
  machine: data.title,
  people: "张伟",
  cardId: "522121199505301234",
  phone: "15180864978",
  dateTimeRange: ["2022-03-17 10:00:00", "2022-03-27 10:00:00"],
  content: data.content
})

function success() {
  axios.post("http://localhost:24154/api/manage/subscribe", form).then((resp) => {
    if (resp.status == 200) {
      block.value.open()
      setTimeout(() => {
        block.value.close()
        approval.value.open()
      }, 4000)
      setTimeout(() => {
        display.value = true
        uni.switchTab({url: "/pages/manage/index"})
      }, 7000)
    } else {
      alert("后台服务失败")
    }
  })
}

function subscribeTime(data: { value: string, ok: boolean }) {
  data.ok = false
  display.value = false
  const value = data.value.split('-')
  const now = new Date()
  const time = now.toLocaleDateString('fr-CA')
  form.dateTimeRange = [time + " " + value[0].trim() + ':00', time + " " + value[1] + ':00']
  popup.value.open("top")
}

const tip = ["仪器ID为：" + form.machineId]
</script>
